<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Screens Demo</title>
    <style>
        body {
            padding-top: 75px;
            margin: 0 auto;
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
            text-align: -webkit-center;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif
        }

        article {
            padding: 1em;
        }


        .monitor {
            width: 300px;
            height: 150px;
            overflow-y: scroll;
            border: solid 1em #333;
            border-radius: .5em;
            background: lightblue;
        }

        .monitor::-webkit-scrollbar {
            width: 15px;
        }

        .monitor::-webkit-scrollbar-thumb {
            background: #666;
        }

        ::-webkit-scrollbar-track {
            background-color: #888;
        }
        .center {
            text-align: -webkit-center;
        }
    </style>
</head>
<body>

<script>
    let monitors = wails.Screens.GetAll();
    monitors.then((result) => {
        console.log({result})
        let html = "";
        for (let i = 0; i < result.length; i++) {
            html += "<article class='center'><div class='monitor'><div style='padding:5px;'>";
            let hidpi = result[i].scale === 2 ? " (HiDPI)" : "";
            html += "<h3 class='center'>"+result[i].name+"</h3>";
            html += "<h4 class='center'>"+hidpi+"</h4>";
            html += "<h4 class='center'>"+result[i].size.width+"x"+result[i].size.height+"</h4>";
            html += "</div></div></article>";
        }
        document.body.innerHTML = html;
    })
</script>
</body>
</html>